﻿<!DOCTYPE html>
<!-- 
/////////////////////////////////////////////////////////////////////////////////////////////////


		   _ _   _       _   _   _ _______            _      
		  | (_) (_)     | | (_) (_)__   __|          | |     
		  | | ___  _ __ | | _____    | |_ __ __ _  __| | ___ 
	  _   | |/ _ \| '_ \| |/ / _ \   | | '__/ _` |/ _` |/ _ \
	 | |__| | (_) | | | |   < (_) |  | | | | (_| | (_| |  __/
	  \____/ \___/|_| |_|_|\_\___/   |_|_|  \__,_|\__,_|\___|
															 
		APPLIED WEB ARCHITECTURE - GROUP PROJECT ASSIGNEMENT
	
	LEAD DEVELOPPER		Jalil BENAYACHI
	LIVE DEMO			http://thejals.com/projects/jonkotrade/
	GOOGLE PROJECT		https://code.google.com/p/jonkotrade/
	LICENSE				(after PingPong release:) MIT Open-source License
	
	ABOUT THE PROJECT	/ 	CREDITS
	=	STOCK PHOTOS
		Since it's a marketing website project, we had to use stock photos to illustrate
		the different contents. Both are coming from a royalty-free image db websites,
		such as http://www.dreamstime.com/free-photos 
		
	= 	LAYOUT	
		Some of the layout CSS comes from third-party developers, shared open-source.
		Same about the Javascript: jQuerry and animations libraries were used.
		The main HTML was adapted from a previous project of mine, a Wordpress-like
		CMS which I didn't finally released.
		Instead Bootstrap I used WWW.GETSKELETON.COM to make the website responsive.
		
	=	PHP / SQL
		All the PHP and SQL was made from start to scratch after studying the project
		description and creating a list of features the website has to be able to do.
		Some were added during the development process.
		
	= 	HOSTING
		Since the PHP is server side, the project was developed using uWamp Server 
		(Similar to WAMP SERVER) for local-dev and live demo is hosted on my personal
		virtual private server (VPS) that I turned into an Apache2, PHP, mySQL (LAMP)
		server. It is ran by Ubuntu 14.04 LTS and hosted in OVH.fr's Roubaix Datacenters, FRANCE.

	=	SUBVERSION
		Because it is a group project, we used a subversion server (Hosted by Google Projects)
		with TortoiseSVN windows client. The Subversion's server address can be found on the 
		Google project page.
	
	LET'S PUT SOME CODE DOWN THERE NOW
/////////////////////////////////////////////////////////////////////////////////////////////////
 -->
<?php 
$path="../";
$page="account"; // active page (for the menu css)
include_once('includes/header.inc.php'); ?>


<?php

if(!isset($_POST['op']) AND !$cookies_bool)  //if no form returned something to the page AND if the user isn't logged
{
		//HOME MADE Captcha :) I'm proud of it :) Using Canvas
		//First, let's generate a random string
		$randomString = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, 3);  //for Login in (short string)
		$randomStringR = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, 7);  //for Registering (long string)
		//Then, let's hash it
		$hash_string = sha1($randomString);
		$hash_stringR = sha1($randomStringR);
echo'
	<section id="home" class="home boxed">
		<div class="container">		
			<!-- Text -->
			<div class="six columns">
				<h2 class="title">I already have an account </h2>
				
				<div class="subtitle">
					<p class="small">
						Hello ! Good to see you, dear member. I forgot your name and password, can you just refresh my memory ?
					</p>
					<div class="register">
					<form novalidate="novalidate" method="post" action="../account/" id="register-form" class="register-form"/>
					<input name="email" id="email" placeholder="Enter your email..." type="email"/>
					<input name="password" id="password" placeholder="Enter your password..." type="password"/>
					<legend><canvas id="captcha" width="100" height="50"></canvas>
					<script>
					var ctx = document.getElementById(\'captcha\').getContext(\'2d\');
					var kitty = new Image();
					kitty.src = \'../data/img/captchagrid.png\';
					kitty.onload = function(){
					  ctx.drawImage(this, 0,0,this.width, this.height);
					  ctx.font         = \'45px Tequillasunrise\';
					  ctx.fillStyle = \'#333399\';
					  ctx.textBaseline = \'top\';
					  ctx.fillText  (\''.$randomString.'\', 10, 2);
					};
					</script>
					
					<input name="captcha" id="captchafield" placeholder="Retype captcha..." type="text"/></legend>
					<legend>This website uses cookies to keep you logged in. </legend><br/>
					<input type="hidden" name="op" value="login" />
					<input type="hidden" name="cc" value="'.$hash_string.'" />
					<input value="Log me in !" class="button" type="submit">
				</form>
				</div>
				</div> <!-- /.subtitle -->
				</div><!-- /.eight columns -->

						<!-- Text -->
			<div class="ten columns">
				<h2 class="title">I just came in. Let me register!</h2>
				
				<div class="subtitle">
					<p class="small">
						Great ! A new member ! Just fill out this form and... welcome to the community, sir !
					</p>
				</div> <!-- /.subtitle -->
				
				<div class="register">
					<form novalidate="novalidate" method="post" action="../account/" id="register-form" class="register-form"/>
					<h4>Login information </h4>
					<input name="email" id="email" placeholder="Enter your email..." type="email"/>
					<input name="password" id="password" placeholder="Enter your desired password..." type="password"/>
					<h4>Personal information </h4>
					<select name="gender" id="gender" placeholder="Gender">
					<option value="male">Mr.</option>
					<option value="female">Mrs.</option>
					</select>
					<input name="firstname" id="firstname" placeholder="First name" type="text"/>
					<input name="surname" id="surname" placeholder="Surname" type="text"/>
					<input name="phone" id="phone" placeholder="Phone number..." type="text"/>
					<input name="birth" id="birth" placeholder="Date of birth (YYYY-MM-DD)..." type="text"/>
					<textarea name="address" id="address" placeholder="Address"></textarea>
					<legend><canvas id="captchaR" width="250" height="50"></canvas>
					<script>
					var ctxR = document.getElementById(\'captchaR\').getContext(\'2d\');
					var kittyR = new Image();
					kittyR.src = \'../data/img/captchagrid.png\';
					kittyR.onload = function(){
					  ctxR.drawImage(this, 0,0,this.width, this.height);
					  ctxR.font         = \'45px Tequillasunrise\';
					  ctxR.fillStyle = \'#333399\';
					  ctxR.textBaseline = \'top\';
					  ctxR.fillText  (\''.$randomStringR.'\', 10, 2);
					};
					</script>
					<input name="captcha" id="captchafield" placeholder="Retype captcha..." type="text"/></legend>
					<input type="hidden" name="cc" value="'.$hash_stringR.'" />
					<p><label><input type="checkbox" name="terms" value="checked" /> I have read and accept <a>the terms of condition</a>.<br/> We won\'t share your personal data with third party companies.</label></p>
					<input type="hidden" name="op" value="register" />
					<input type="hidden" name="active" value="notyet" />
					<input value="Register!" class="button" type="submit">
				</form>
				</div>

				
			</div><!-- /.eight columns -->

		</div> <!-- /.container -->
	</section> <!-- #home -->

	<section id="overview" class="overview boxed">

		<div class="section-header">
			<h3 class="title"><span class="title-highlight">Latests</span> Registrations In Your Area </h3>

			<p class="description">
				Find out the people who just subscribed around you.
			</p>
		</div> <!-- /.section-header -->


		<div class="container">

			<div class="sixteen columns">
				';
				$askusers = $db->query('SELECT name, gender, firstname, surname, birth, pic, regdate FROM jktrade_users ORDER BY ID DESC LIMIT 0, 4 ');
				while ($usersdata = $askusers->fetch())
				{
				$dob = strtotime(str_replace("/","-",$usersdata['birth']));       
											$tdate = time();
											$age = 0;
											while( $tdate > $dob = strtotime('+1 year', $dob))
											{
												++$age;
											}
				echo'<div class="sellingitem-block opacity-zero">
					<div class="sellingitem-preview-img">
						<a href="../"><img src="../data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h4 class="sellingitem-no">'.$usersdata['name'].'</h4>

					<p>	<strong>Gender:</strong> '.$usersdata['gender'].' <br/>
						<strong>Age:</strong> '.$age.' <br/>
						<strong>Registered</strong> '.$usersdata['regdate'].' <br/>
					</p>
				</div> <!-- /.sellingitem-block -->
				';}

			echo'	

			</div> <!--- /.sixteen columns -->

			
		

	</section> <!-- #overview -->
'; }

if((isset($_POST['op']) AND $_POST['op']=='manage') OR $cookies_bool) // user is already connected
{ 
		include_once('includes/account/manage.inc.php');
}


if(isset($_POST['op']) AND $_POST['op']=='login')
{ 
// Unlike the registration, login in is pretty simple. All we have to do is to check for the database and check if the email exists. If it exists, let's see if the password matches. 
// Since the password was encrypted during the registration, we'll have to crypt the input password and compare it to the crypted one in the database
	if(isset($_POST['email']) AND isset ($_POST['password']) AND isset($_POST['captcha']) AND isset($_POST['cc'])) // let's see if the user posted something
	{

		$hash_captcha=sha1($_POST['captcha']);
		$hash_pwd = sha1($_POST['password']);
		$email = $_POST['email']; // just to make it more easy to use
		$req = $db->prepare('SELECT id FROM jktrade_users WHERE email = :email AND pwd = :password');
		$req->execute(array(
			'email' => $email,
			'password' => $hash_pwd));
		$result = $req->fetch();

	if (!$result OR ($hash_captcha!=$_POST['cc'])) // No account found or wrong captcha
	{
    echo '
		<section id="home" class="home boxed">
		<div class="container">		
			<!-- Text -->
			<div class="twelve columns">
				<h2 class="title">Oops.. Looks like you\'re trying to log in with wrong informations !</h2>
				
				<div class="subtitle">
					<p class="small">
					';
					if(!$result) //The email/pwd doesn't match or unexisting account
						{ echo'You should check your email and password again. If you forgot your password, <a href="../account/?op=retrieve">click here</a><br/>';}
					if($hash_captcha!=$_POST['cc'])
						{ echo 'Hmm.. Looks like the captcha you entered is invalid. Are you a human ? Try again.';}
					
					//HOME MADE Captcha :) I'm proud of it :) Using Canvas
					//First, let's generate a random string
					$randomString = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, 7); 
					//Then, let's hash it
					$hash_string = sha1($randomString);
					
					echo'</p>
					<div class="register">
				<form novalidate="novalidate" method="post" action="../account/" id="register-form" class="register-form"/>
					<input name="email" id="email" placeholder="Enter your email..." type="email"/>
					<input name="password" id="password" placeholder="Enter your password..." type="password"/>
					<legend><canvas id="captcha" width="250" height="50"></canvas>
					<script>
					var ctx = document.getElementById(\'captcha\').getContext(\'2d\');
					var kitty = new Image();
					kitty.src = \'../data/img/captchagrid.png\';
					kitty.onload = function(){
					  ctx.drawImage(this, 0,0,this.width, this.height);
					  ctx.font         = \'45px Tequillasunrise\';
					  ctx.fillStyle = \'#333399\';
					  ctx.textBaseline = \'top\';
					  ctx.fillText  (\''.$randomString.'\', 10, 2);
					};
					</script>
					
					<input name="captcha" id="captchafield" placeholder="Retype captcha..." type="text"/></legend>
					<legend>This website uses cookies to keep you logged in. </legend><br/>
					<input type="hidden" name="op" value="login" />
					<input type="hidden" name="cc" value="'.$hash_string.'" />
					<input value="Log me in !" class="button" type="submit">
				</form>
				</div>
				</div> <!-- /.subtitle -->
				</div><!-- /.twelve columns -->
			</div>
		</section>	
	';	
	}
else // User is connected, let's tell him and make him reach the user pannel
	// this is necessary because once we know that everything's allright, we have to tell the header to create the logincookies and start the session !
{
 	$reponse = $db->query('SELECT firstname FROM jktrade_users WHERE id='.$result['id'].'');
	$data = $reponse->fetch();
	echo '
		<section id="home" class="home boxed">
		<div class="container">		
			<!-- Text -->
			<div class="twelve columns">
				<h2 class="title">Nice to see you again, '.$data['firstname'].' !</h2>
				
				<div class="subtitle">
					<h5>
						Please click here to keep you logged in and move to the user pannel.
						<form method="post" action="../account/" class="register-form">
						<input type="hidden" name="user_email" value="'.$_POST['email'].'" />
						<input type="hidden" name="user_hash_pwd" value="'.$hash_pwd.'" />
						<input type="hidden" name="user_id" value="'.$result['id'].'" />
						<input type="hidden" name="op" value="manage" />
						<input type="submit" class="button" value="Manage my account" /></form>
					</h5>

				</div> <!-- /.subtitle -->
				</div><!-- /.twelve columns -->
			</div>
		</section>	
	';	
	}
	


}//else
}//intern if



if(isset($_POST['op']) AND $_POST['op']=='register') // The form asked to register user
{
include_once('includes/account/register.inc.php');
}


?>




<?php include_once('includes/footer.inc.php'); ?>